﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#chou{
				width: 500px;
				height: 300px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				margin: 0px auto;
			}
			#rname{
				width: 500px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 40px;
			}
			input{
				width: 200px;
				height: 50px;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="chou">
			<input style="border:none;" type="text"  readonly  unselectable="on" value="" id="rname">
			<input type="button" id="a" value="开始" onclick="st(this)" onkeydown="st(this)"/>
		</div>
		
	</body>
	<script type="text/javascript">
		var arr = new Array("炒米","热干面","面条");
		var i=0;
		var a=0;
		var timer;
		function Chou(){
			document.getElementById("rname").value=arr[i];
			
			i=Math.floor(Math.random()*3);
			
		}
		
		function statr(){
			timer = setInterval("Chou()",0.1);
			a=1;
		}
		
		function stop(){
			clearInterval(timer);
			a=0;
		}
		function st(val){
			switch (val.value){
				case "停止":
					stop();
					val.value="开始"
					break;
				case "开始":
					statr();
					val.value="停止"
					break;
				default:
					break;
			}
		}
		document.onkeyup = function (event){
			if(event.keyCode==13&&a==0){
				statr();
				document.getElementById("a").value="停止";
			}else if(event.keyCode==13&&a==1){
				stop();
				document.getElementById("a").value="开始";
			}
		}
		
	</script>
</html>
